<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('忘记密码')" />
</head>

<script th:src="@{../static/plugins/pace/js/pace.min.js}"></script>
<script th:src="@{../static/js/jquery-2.2.4.min.js}"></script>
<script th:src="@{../static/js/bootstrap.min.js}"></script>
<script th:src="@{../static/js/nifty.min.js}"></script>
<script th:src="@{../static/js/core/app-common.js?v=0.0.2}"></script>
<script th:src="@{../static/plugins/bootstrap-wizard/1.4.2/jquery.bootstrap.wizard.min.js}"></script>
<script th:src="@{../static/plugins/jquery-validation/1.15.0/jquery.validate.min.js}"></script>
<script th:src="@{../static/plugins/jquery-validation/1.15.0/i18n/messages_zh.min.js}"></script>
<body>

<div id="container" class="cls-container">

    <!-- BACKGROUND IMAGE -->
    <!--===================================================-->
    <div id="bg-overlay"></div>


    <!-- PASSWORD RESETTING FORM -->
    <!--===================================================-->
    <div class="cls-content">
        <div class="cls-content-lg panel">
            <div class="panel-body bg-light"  id="panel_sec_password">
                <div class="pad-ver">
                    <i class="pli-mail icon-3x"></i>
                </div>
                <!--<p class="text-muted">忘记密码 </p>-->


                <div class="wz-heading">

                    <!--Nav-->
                    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    <ul class="row wz-step wz-icon-bw wz-nav-off mar-top">
                        <li class="col-xs-4">
                            <a data-toggle="tab" href="#sec_password-tab1">
                                <span class="text-danger"><i class="ti-unlock icon-2x"></i></span>
                                <p class="text-semibold mar-no">验证</p>
                            </a>
                        </li>
                        <li class="col-xs-4">
                            <a data-toggle="tab" href="#sec_password-tab2">
                                <span class="text-warning"><i class="ti-pencil icon-2x"></i></span>
                                <p class="text-semibold mar-no">修改密码</p>
                            </a>
                        </li>
                        <li class="col-xs-4">
                            <a data-toggle="tab" href="#sec_password-tab3">
                                <span class="text-success"><i class="ti-medall icon-2x"></i></span>
                                <p class="text-semibold mar-no">完成</p>
                            </a>
                        </li>
                    </ul>

                </div>

                <!--progress bar-->
                <div class="progress progress-xs">
                    <div class="progress-bar progress-bar-primary"></div>
                </div>

                <div class="panel-body">

                    <!--Form-->
                    <form id="form_sec_password_input" class="form-horizontal" autocomplete="off">
                        <input type="hidden" id="index" name="index">
                        <div class="panel-body">
                            <div class="tab-content">

                                <!--First tab-->
                                <div id="sec_password-tab1" class="tab-pane">
                                    <div class="form-group">
                                        <input type="text" name="mail" class="form-control" placeholder="邮箱" value="641633367@qq.com">
                                    </div>

                                    <div class="input-group mar-btm">
                                        <input type="text" name="mailCode" placeholder="验证码" class="form-control" value="">
                                        <span class="input-group-btn"><button class="btn btn-info" type="button" id="send-mailCode-button">发送验证码</button></span>
                                    </div>
                                </div>

                                <!--Second tab-->
                                <div id="sec_password-tab2" class="tab-pane fade">
                                    <div class="form-group">
                                        <input type="password" class="form-control" id="newPassword" name="newPassword" placeholder="请输入新密码">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" id="newPassword_2" name="newPassword_2" placeholder="再次输入新密码">
                                    </div>
                                </div>

                                <!--Fourth tab-->
                                <div id="sec_password-tab3" class="tab-pane  mar-btm text-center">
                                    <h4>修改密码成功</h4>
                                </div>

                            </div>
                        </div>
                    </form>

                </div>

                <hr/>

                <div class="text-right">
                    <div class="box-inline">
                        <button id="btn_next" type="button" class="btn btn-primary">下一步</button>
                        <button id="btn_finish" type="button" class="btn btn-warning" disabled>完成</button>
                    </div>
                </div>


                <div class="pad-top">
                    <a href="javascript:void(0)" class="btn-link mar-rgt" onclick="window.location.href='index'">重新登录</a>
                </div>
            </div>
        </div>
    </div>
    <!--===================================================-->

</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

</body>

<script th:inline="javascript">

    $(function(){
        fn_password_input_validate();
        setTimeout(function(){
            $("#form_sec_password_input #password").val("");
        }, 300)
    });

    $('#panel_sec_password').bootstrapWizard({
        tabClass		    : 'wz-steps',
        nextSelector	    : '#btn_next',
        finishSelector      : '#btn_finish',
        onTabClick: function(tab, navigation, index) {
            return false;
        },
        onInit : function(){
            $('#panel_sec_password').find('#btn_finish').hide().prop('disabled', true);
        },
        onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;
            var wdt = 100/$total;
            var lft = wdt*index;

            $('#panel_sec_password').find('.progress-bar').css({width:wdt+'%',left:lft+"%", 'position':'relative', 'transition':'all .5s'});

            // If it's the last tab then hide the last button and show the finish instead
            if($current >= $total) {
                $('#panel_sec_password').find('#btn_next').hide();
                $('#panel_sec_password').find('#btn_finish').show().prop('disabled', false);
            } else {
                $('#panel_sec_password').find('#btn_next').show();
                $('#panel_sec_password').find('#btn_finish').hide().prop('disabled', true);
            }
        },
        onNext: function(tab, navigation, index){
            if($('#form_sec_password_input').valid()) {
                // 设置当前 index
                $('#panel_sec_password').find('input#index').val(index);
                // 提交表单
                fn_sec_password_input_submit(index)
            }else{
                __toastr_error("请检查表单必填项");
            }

            return false;
        },
        onFinish: function () {
            window.location.href='index';
        }
    });

    function fn_password_input_validate(){
        __init_validate("form_sec_password_input", {
            ignore : ':not(:visible)',
            rules : {
                mail : {
                    required : true,
                    email : true,
                },
                mailCode : {
                    required : true
                },
                password : {
                    required : true
                },
                newPassword : {
                    required : true,
                    minlength : 8,
                    maxlength : 24
                },
                newPassword_2 : {
                    required : true,
                    equalTo : '#newPassword'
                }
            }
        });
    }

    //后台验证
    function fn_sec_password_input_submit(index) {
        __form_save("form_sec_password_input", "/main/forgetPassword", function(data) {
            if(data.state === 1){
                $('#panel_sec_password').bootstrapWizard('show', index);
            }
        });
    }

    //发送邮箱验证码
    $("#send-mailCode-button").on("click", function(){
        var mail = $("input[name='mail']").val();
        var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(!reg.test(mail)){
            __toastr_error("请输入正确的邮箱");
            return false;
        }

        var $btn = $("#send-mailCode-button");
        $btn.attr("disabled", true);
        __ajax_post("/security/sms/createMail", {mail : mail}, function(data){
            $btn.attr("disabled", false);
            if(data && data.state === 1){
                __toastr_success("验证码已经发送到您的邮箱");
                $btn.attr("disabled", true);
                var wait = 60;
                var time = setInterval(function(){
                    wait -= 1;
                    $btn.text("再次发送("+wait+")");
                    if(wait === 0){
                        clearInterval(time);
                        $btn.attr("disabled", false); $btn.text("发送验证码");
                    }
                }, 1000);
            }else{
                __toastr(data);
            }
        });
    });

</script>

</html>